<template>
	<view class="bg-theme1 pad-left-right-30 mar-top-20">
		<view class="centerY list" v-for="item in boxGifts" :key="item.id">
			<view class="flex-w">
				<view class="mar-bottom-10 centerY" v-for="info in item.gift_goods_info">
					<image class="image-size" :src="info.cover"></image>
					<view class="mar-left-32">
						<view class="font-28 color-white">{{info.name}}</view>
						<capsule :number="item.stock" leftBg="#dcdcdc" leftColor="#000" color="#fff"
							bgColor="rgba(0,0,0,.1)" class="mar-top-20 capsule"></capsule>
					</view>
				</view>
			</view>
			<view class="centerY columnY font-28">
				<view class="color-grey">概率</view>
				<view class="mar-top-20 font-w-600 color-theme">{{item.rate_txt}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsDetails
	} from '@/config/api.js'
	export default {
		name: "boxPrize",
		props: {
			goodsId: {
				type: String | Number,
				default: 0
			}
		},
		data() {
			return {
				boxGifts: []
			};
		},
		created() {
			this.getDataInfo();
		},
		methods: {
			getDataInfo() {
				goodsDetails({
					id: this.goodsId,
					with_gifts: 1
				}).then(res => {
					this.boxGifts = res.data.box_gifts;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding: 28rpx 18rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, .05);
	}

	.list:last-child {
		border-bottom: 0 none;
	}

	.image-size {
		width: 110rpx;
		height: 110rpx;
		border-radius: 20rpx;
	}
</style>